<template>
    <div class="questionnaire-detail">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="问卷详情" left-arrow @click-left="onBack">
            <template #right>
                <div class="nav-icons">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="circle-btn"></span>
                </div>
            </template>
        </van-nav-bar>

        <div class="detail-container">
            <!-- 问卷标题和描述 -->
            <div class="survey-header">
                <div class="title-section">
                    <h1 class="survey-title">门诊满意度调查</h1>
                    <span class="question-count">共3题</span>
                </div>
                <p class="survey-description">
                    本次测评主要在收集门诊各环节服务态度,主在改善就诊环境和服务态度的基础上,继续提高医院剂数水平,最大程度保证就诊者需求
                </p>
            </div>

            <!-- 问题列表 -->
            <div class="questions-container">
                <!-- 问题1：门诊情况 -->
                <div class="question-item">
                    <div class="question-header">
                        <span class="question-text">1、您这次门诊是以下哪种情况?</span>
                        <span class="question-type">单选</span>
                    </div>
                    <div class="options-container">
                        <van-radio-group v-model="answers.question1">
                            <van-cell-group>
                                <van-cell>
                                    <van-radio name="first-visit" icon-size="18px">初次门诊</van-radio>
                                </van-cell>
                                <van-cell>
                                    <van-radio name="follow-up" icon-size="18px">复诊</van-radio>
                                </van-cell>
                                <van-cell>
                                    <van-radio name="transferred" icon-size="18px">基层/社区医院转入</van-radio>
                                </van-cell>
                                <van-cell>
                                    <van-radio name="other" icon-size="18px">其他</van-radio>
                                </van-cell>
                            </van-cell-group>
                        </van-radio-group>
                    </div>
                </div>

                <!-- 问题2：选择医院因素 -->
                <div class="question-item">
                    <div class="question-header">
                        <span class="question-text">2、选择该院门诊看病考虑的因素是以下哪种?</span>
                        <span class="question-type">多选</span>
                    </div>
                    <div class="options-container">
                        <van-checkbox-group v-model="answers.question2">
                            <van-cell-group>
                                <van-cell>
                                    <van-checkbox name="high-tech" icon-size="18px">技术较高</van-checkbox>
                                </van-cell>
                                <van-cell>
                                    <van-checkbox name="convenient" icon-size="18px">就近方便</van-checkbox>
                                </van-cell>
                                <van-cell>
                                    <van-checkbox name="reputation" icon-size="18px">医院名气大</van-checkbox>
                                </van-cell>
                                <van-cell>
                                    <van-checkbox name="environment" icon-size="18px">候诊环境好</van-checkbox>
                                </van-cell>
                                <van-cell>
                                    <van-checkbox name="service" icon-size="18px">服务态度好</van-checkbox>
                                </van-cell>
                                <van-cell>
                                    <van-checkbox name="equipment" icon-size="18px">设备先进</van-checkbox>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </div>
                </div>

                <!-- 问题3：意见建议 -->
                <div class="question-item">
                    <div class="question-header">
                        <span class="question-text">3、您对我们有什么意见吗?</span>
                    </div>
                    <div class="suggestion-container">
                        <van-field v-model="answers.question3" type="textarea" placeholder="请输入您想说的意见" rows="4"
                            maxlength="200" show-word-limit class="suggestion-input" />
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-section">
                <van-button type="primary" size="large" block round @click="submitSurvey" :loading="submitting"
                    class="submit-btn">
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showSuccessToast } from 'vant';

const router = useRouter();

// 答案数据
const answers = reactive({
    question1: '', // 不设置默认值，让用户手动选择
    question2: [],
    question3: ''
});

// 提交状态
const submitting = ref(false);

const onBack = () => {
    router.back();
};

// 提交问卷
const submitSurvey = async () => {
    console.log('提交的答案:', answers);

    // 验证必填项
    if (!answers.question1) {
        showToast('请选择门诊情况');
        return;
    }

    if (answers.question2.length === 0) {
        showToast('请至少选择一个考虑因素');
        return;
    }

    submitting.value = true;

    try {
        // 模拟提交
        await new Promise(resolve => setTimeout(resolve, 1000));

        showSuccessToast('问卷提交成功！');
        console.log('问卷提交成功，答案:', answers);

        // 跳转到提交成功页面
        setTimeout(() => {
            router.push('/submit-success');
        }, 1500);

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    } catch (error) {
        showToast('提交失败，请重试');
    } finally {
        submitting.value = false;
    }
};
</script>

<style scoped>
.questionnaire-detail {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.detail-container {
    flex: 1;
    padding: 16px;
}

/* 导航栏图标 */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    background: #d8d8d8;
    border-radius: 50%;
    display: inline-block;
}

.circle-btn {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d8d8d8;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

/* 问卷标题和描述 */
.survey-header {
    margin-bottom: 24px;
}

.title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.survey-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

.question-count {
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 12px;
}

.survey-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* 问题容器 */
.questions-container {
    margin-bottom: 32px;
}

.question-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.question-text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    flex: 1;
    line-height: 1.4;
}

.question-type {
    font-size: 12px;
    color: #999;
    background: #e8f4fd;
    color: #338aff;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 8px;
    white-space: nowrap;
}

/* 选项容器 */
.options-container {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* 意见建议输入框 */
.suggestion-container {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.suggestion-input {
    padding: 12px;
}

/* 提交按钮 */
.submit-section {
    padding: 16px 0;
}

.submit-btn {
    height: 48px;
    font-size: 18px;
    font-weight: 500;
    background: #338aff;
    border: none;
    box-shadow: 0 4px 12px rgba(51, 138, 255, 0.3);
}

.submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(51, 138, 255, 0.3);
}

/* 自定义样式 */
:deep(.van-cell) {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s;
}

:deep(.van-cell:last-child) {
    border-bottom: none;
}

:deep(.van-cell:hover) {
    background-color: #f8f9fa;
}

:deep(.van-radio__label) {
    font-size: 15px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

:deep(.van-checkbox__label) {
    font-size: 15px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

/* 单选样式 */
:deep(.van-radio__icon) {
    font-size: 18px;
    color: #ddd;
    transition: all 0.2s;
}

:deep(.van-radio--checked .van-radio__icon) {
    color: #338aff !important;
    background-color: #338aff;
    border-color: #338aff;
}

:deep(.van-radio__icon--checked) {
    color: #fff !important;
}

/* 多选样式 */
:deep(.van-checkbox__icon) {
    font-size: 18px;
    color: #ddd;
    transition: all 0.2s;
}

:deep(.van-checkbox--checked .van-checkbox__icon) {
    color: #338aff !important;
    background-color: #338aff;
    border-color: #338aff;
}

:deep(.van-checkbox__icon--checked) {
    color: #fff !important;
}

:deep(.van-field__control) {
    font-size: 15px;
    color: #333;
}

:deep(.van-field__placeholder) {
    color: #999;
}

/* 选项点击区域优化 */
:deep(.van-radio) {
    width: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
}

:deep(.van-checkbox) {
    width: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
}

/* 选中状态的额外样式 */
:deep(.van-radio--checked .van-radio__label) {
    color: #338aff;
    font-weight: 500;
}

:deep(.van-checkbox--checked .van-checkbox__label) {
    color: #338aff;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 375px) {
    .survey-title {
        font-size: 18px;
    }

    .question-text {
        font-size: 15px;
    }

    .submit-btn {
        font-size: 16px;
        height: 44px;
    }
}
</style>